import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

Page {
    id: root
    title: "甘蔗农业机监控系统"
    background: Rectangle { color: "#f9fafb" }

    // 模拟数据模型
    property real fuelLevel: 65.0
    property real todayWorkingHours: 4.5
    property real currentSpeed: 3.2
    property real engineTemp: 78
    property real bladeRpm: 1250
    property real hydraulicPressure: 220

    // 定时器用于模拟数据更新
    Timer {
        interval: 30000 // 30秒更新一次
        running: true
        repeat: true
        onTriggered: {
            // 燃油缓慢减少
            fuelLevel = Math.max(0, fuelLevel - Math.random() * 0.5)
        }
    }

    // 当前时间更新定时器
    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            var now = new Date()
            var year = now.getFullYear()
            var month = ("0" + (now.getMonth() + 1)).slice(-2)
            var day = ("0" + now.getDate()).slice(-2)
            var hour = ("0" + now.getHours()).slice(-2)
            var minute = ("0" + now.getMinutes()).slice(-2)
            var second = ("0" + now.getSeconds()).slice(-2)
            currentTime.text = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
        }
    }

    header: ToolBar {
        id: pageHeader
        background: Rectangle { color: "#2E7D32" }

        RowLayout {
            anchors.fill: parent
            spacing: 10

            Row {
                spacing: 10
                Rectangle {
                    width: 24
                    height: 24
                    radius: 12
                    color: "white"
                    opacity: 0.3

                    Text {
                        anchors.centerIn: parent
                        text: "⚙"
                        font.pixelSize: 16
                        color: "white"
                    }
                }
                Label {
                    text: "甘蔗农业机监控系统"
                    font.bold: true
                    font.pixelSize: 18
                    color: "white"
                }
            }

            Item { Layout.fillWidth: true }

            Column {
                visible: root.width > 600
                Label {
                    text: "当前时间"
                    font.pixelSize: 12
                    color: "white"
                    opacity: 0.9
                }
                Label {
                    id: currentTime
                    font.bold: true
                    color: "white"
                }
            }

            ToolButton {
                background: Rectangle {
                    radius: 16
                    color: parent.pressed ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.2)"
                }
                contentItem: Text {
                    text: "👤"
                    font.pixelSize: 16
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }

    ScrollView {
        anchors.fill: parent
        clip: true
        
        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

        Column {
            id: mainContent
            width: root.width - 32
            spacing: 24
            padding: 16

            // 设备当前状态部分
            Column {
                spacing: 16
                width: parent.width

                Label {
                    text: "设备当前状态"
                    font.bold: true
                    font.pixelSize: 18
                    color: "#1e293b"
                }

                // 设备状态卡片网格
                Grid {
                    id: statusGrid
                    columns: root.width > 1024 ? 4 : (root.width > 600 ? 2 : 1)
                    spacing: 16
                    width: parent.width

                    // 设备型号卡片
                    Loader {
                        width: (statusGrid.width - statusGrid.spacing * (statusGrid.columns - 1)) / statusGrid.columns
                        sourceComponent: statusCardComponent
                        onLoaded: {
                            item.title = "设备型号"
                            item.value = "SG-8500 甘蔗收割机"
                            item.icon = "truck"
                            item.iconColor = "#2E7D32"
                            item.iconBgColor = "#dcfce7"
                            item.extraInfo = "设备ID: SC-2023-0589"
                        }
                    }

                    // 今日工作时长卡片
                    Loader {
                        width: (statusGrid.width - statusGrid.spacing * (statusGrid.columns - 1)) / statusGrid.columns
                        sourceComponent: statusCardComponent
                        onLoaded: {
                            item.title = "今日工作时长"
                            item.value = todayWorkingHours.toFixed(1) + " 小时"
                            item.icon = "clock-o"
                            item.iconColor = "#8BC34A"
                            item.iconBgColor = "#f0fdf4"
                            item.progressVisible = true
                            item.progressValue = todayWorkingHours / 10 * 100
                            item.extraInfo = "预计今日总工作时长: 10小时"
                        }
                    }

                    // 当前作业速度卡片
                    Loader {
                        width: (statusGrid.width - statusGrid.spacing * (statusGrid.columns - 1)) / statusGrid.columns
                        sourceComponent: statusCardComponent
                        onLoaded: {
                            item.title = "当前作业速度"
                            item.value = currentSpeed.toFixed(1) + " km/h"
                            item.icon = "gear"
                            item.iconColor = "#FFC107"
                            item.iconBgColor = "#fffbeb"
                            item.trendVisible = true
                            item.trendValue = "+5%"
                            item.trendUp = true
                        }
                    }

                    // 燃油剩余卡片
                    Loader {
                        width: (statusGrid.width - statusGrid.spacing * (statusGrid.columns - 1)) / statusGrid.columns
                        sourceComponent: statusCardComponent
                        onLoaded: {
                            item.title = "燃油剩余"
                            item.value = fuelLevel.toFixed(0) + "%"
                            item.icon = "gasoline"
                            item.iconColor = "#3b82f6"
                            item.iconBgColor = "#eff6ff"
                            item.progressVisible = true
                            item.progressValue = fuelLevel
                            item.progressColor = "#3b82f6"
                            item.extraInfo = "预计可工作: 6.8 小时"
                        }
                    }
                }
            }

            // 昨日工作数据标题
            Label {
                text: "昨日工作数据 (2023-06-14)"
                font.bold: true
                font.pixelSize: 18
                color: "#1e293b"
            }

            // 工作进度概览卡片
            Rectangle {
                width: parent.width
                height: Math.max(450, overviewColumn.childrenRect.height + 40)
                radius: 12
                color: "white"
                border.color: "#f1f5f9"
                border.width: 1

                // 修复阴影效果 - Qt 5.12兼容
                layer.enabled: true
                layer.effect: DropShadow {
                    color: Qt.rgba(0, 0, 0, 0.08)
                    radius: 4
                    samples: 8
                    horizontalOffset: 0
                    verticalOffset: 2
                }

                Column {
                    id: overviewColumn
                    width: parent.width
                    padding: 20
                    spacing: 24

                    Label {
                        text: "工作进度概览"
                        font.bold: true
                        font.pixelSize: 16
                        color: "#334155"
                    }

                    Column {
                        id: statsColumn
                        spacing: 24
                        width: parent.width

                        // 总工作时长
                        Loader {
                            width: parent.width
                            sourceComponent: statItemComponent
                            onLoaded: {
                                item.label = "总工作时长"
                                item.value = "9.2 小时"
                                item.trend = "+1.5 小时"
                                item.trendUp = true
                            }
                        }

                        // 收割面积
                        Loader {
                            width: parent.width
                            sourceComponent: statItemComponent
                            onLoaded: {
                                item.label = "收割面积"
                                item.value = "18.5 亩"
                                item.trend = "+2.3 亩"
                                item.trendUp = true
                            }
                        }

                        // 甘蔗处理量
                        Loader {
                            width: parent.width
                            sourceComponent: statItemComponent
                            onLoaded: {
                                item.label = "甘蔗处理量"
                                item.value = "42.3 吨"
                                item.trend = "-1.8 吨"
                                item.trendUp = false
                            }
                        }

                        // 平均油耗
                        Loader {
                            width: parent.width
                            sourceComponent: statItemComponent
                            onLoaded: {
                                item.label = "平均油耗"
                                item.value = "8.7 L/h"
                                item.trend = "-0.3 L/h"
                                item.trendUp = true
                            }
                        }

                        // 综合效率评分
                        Column {
                            spacing: 8
                            width: parent.width

                            Row {
                                spacing: 16
                                width: parent.width

                                Label {
                                    text: "综合效率评分"
                                    font.pixelSize: 14
                                    color: "#64748b"
                                    font.bold: true
                                }

                                Label {
                                    text: "86 分"
                                    font.pixelSize: 18
                                    color: "#FFC107"
                                    font.bold: true
                                }
                            }

                            Rectangle {
                                height: 4
                                radius: 2
                                width: parent.width
                                color: "#f1f5f9"

                                Rectangle {
                                    width: parent.width * 0.86
                                    height: parent.height
                                    radius: 2
                                    color: "#FFC107"
                                }
                            }
                        }
                    }
                }
            }

            // 工作效率图表 - 放在最底部
            Rectangle {
                width: parent.width
                height: 400
                radius: 12
                color: "white"
                border.color: "#f1f5f9"
                border.width: 1

                // 修复阴影效果 - Qt 5.12兼容
                layer.enabled: true
                layer.effect: DropShadow {
                    color: Qt.rgba(0, 0, 0, 0.08)
                    radius: 4
                    samples: 8
                    horizontalOffset: 0
                    verticalOffset: 2
                }

                Column {
                    anchors.fill: parent
                    padding: 20
                    spacing: 16

                    Row {
                        spacing: 16
                        width: parent.width

                        Label {
                            text: "昨日工作效率趋势"
                            font.bold: true
                            font.pixelSize: 16
                            color: "#334155"
                        }

                        Item { width: 1 }

                        Row {
                            spacing: 4

                            Button {
                                id: hourlyButton
                                text: "每小时处理量"
                                font.pixelSize: 12
                                padding: 6
                                background: Rectangle {
                                    color: hourlyButton.pressed ? "#c6f6d5" : "#dcfce7"
                                    radius: 6
                                    Behavior on color {
                                        ColorAnimation { duration: 150 }
                                    }
                                }
                                contentItem: Text {
                                    text: hourlyButton.text
                                    color: "#2E7D32"
                                    font.pixelSize: 12
                                    horizontalAlignment: Text.AlignHCenter
                                }
                            }

                            Button {
                                id: fuelButton
                                text: "油耗趋势"
                                font.pixelSize: 12
                                padding: 6
                                background: Rectangle {
                                    color: fuelButton.pressed ? "#e2e8f0" : "#f1f5f9"
                                    radius: 6
                                    Behavior on color {
                                        ColorAnimation { duration: 150 }
                                    }
                                }
                                contentItem: Text {
                                    text: fuelButton.text
                                    color: "#64748b"
                                    font.pixelSize: 12
                                    horizontalAlignment: Text.AlignHCenter
                                }
                            }
                        }
                    }

                    // 效率图表
                    Rectangle {
                        width: parent.width
                        height: parent.height - 60
                        color: "transparent"

                        Canvas {
                            id: efficiencyChart
                            anchors.fill: parent
                            antialiasing: true

                            Component.onCompleted: {
                                requestPaint()
                            }

                            onPaint: {
                                var ctx = getContext("2d")
                                if (!ctx) return
                                ctx.clearRect(0, 0, width, height)

                                // 数据点
                                var points = [
                                    {x: 0, y: 4.2}, {x: 1, y: 4.8}, {x: 2, y: 5.1},
                                    {x: 3, y: 4.6}, {x: 4, y: 3.2}, {x: 5, y: 4.5},
                                    {x: 6, y: 5.3}, {x: 7, y: 4.9}, {x: 8, y: 4.7}, {x: 9, y: 4.1}
                                ]

                                // 绘制网格线
                                ctx.strokeStyle = "rgba(0, 0, 0, 0.05)"
                                ctx.lineWidth = 1
                                ctx.setLineDash([2, 4])

                                var gridLines = 7
                                var chartHeight = height - 40
                                var chartWidth = width - 60
                                var chartTop = 20
                                var chartLeft = 50

                                for (var i = 0; i <= gridLines; i++) {
                                    var y = chartTop + (chartHeight / gridLines) * i
                                    ctx.beginPath()
                                    ctx.moveTo(chartLeft, y)
                                    ctx.lineTo(chartLeft + chartWidth, y)
                                    ctx.stroke()
                                }

                                // 绘制填充区域
                                ctx.fillStyle = "rgba(46, 125, 50, 0.1)"
                                ctx.beginPath()
                                ctx.moveTo(chartLeft, chartTop + chartHeight)

                                for (var j = 0; j < points.length; j++) {
                                    var px = chartLeft + (chartWidth / 9) * points[j].x
                                    var py = chartTop + chartHeight - (chartHeight / 6) * points[j].y
                                    if (j === 0) {
                                        ctx.moveTo(px, py)
                                    } else {
                                        ctx.lineTo(px, py)
                                    }
                                }

                                ctx.lineTo(chartLeft + chartWidth, chartTop + chartHeight)
                                ctx.closePath()
                                ctx.fill()

                                // 绘制折线
                                ctx.strokeStyle = "#2E7D32"
                                ctx.lineWidth = 2
                                ctx.setLineDash([])
                                ctx.beginPath()

                                for (var k = 0; k < points.length; k++) {
                                    var px2 = chartLeft + (chartWidth / 9) * points[k].x
                                    var py2 = chartTop + chartHeight - (chartHeight / 6) * points[k].y
                                    if (k === 0) {
                                        ctx.moveTo(px2, py2)
                                    } else {
                                        ctx.lineTo(px2, py2)
                                    }
                                }
                                ctx.stroke()

                                // 绘制数据点
                                ctx.fillStyle = "#2E7D32"
                                for (var m = 0; m < points.length; m++) {
                                    var px3 = chartLeft + (chartWidth / 9) * points[m].x
                                    var py3 = chartTop + chartHeight - (chartHeight / 6) * points[m].y
                                    ctx.beginPath()
                                    ctx.arc(px3, py3, 3, 0, 2 * Math.PI)
                                    ctx.fill()
                                }

                                // 绘制X轴标签
                                ctx.fillStyle = "#64748b"
                                ctx.font = "12px sans-serif"
                                ctx.textAlign = "center"
                                var labels = ["08:00", "09:00", "10:00", "11:00", "12:00",
                                    "13:00", "14:00", "15:00", "16:00", "17:00"]
                                for (var n = 0; n < labels.length; n++) {
                                    var labelX = chartLeft + (chartWidth / 9) * n
                                    ctx.fillText(labels[n], labelX, height - 10)
                                }

                                // 绘制Y轴标签
                                ctx.textAlign = "right"
                                for (var o = 0; o <= 6; o++) {
                                    var labelY = chartTop + chartHeight - (chartHeight / 6) * o
                                    ctx.fillText(o + " t", chartLeft - 10, labelY + 4)
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 状态卡片组件定义
    Component {
        id: statusCardComponent

        Rectangle {
            id: statusCardRoot
            property string title: ""
            property string value: ""
            property string icon: ""
            property color iconColor: "black"
            property color iconBgColor: "lightgray"
            property bool progressVisible: false
            property real progressValue: 0
            property color progressColor: "#8BC34A"
            property string extraInfo: ""
            property bool trendVisible: false
            property string trendValue: ""
            property bool trendUp: true

            width: parent ? parent.width : 200
            height: 140
            radius: 12
            color: "white"
            border.color: "#f1f5f9"
            border.width: 1

            // 修复阴影效果 - Qt 5.12兼容
            layer.enabled: true
            layer.effect: DropShadow {
                color: Qt.rgba(0, 0, 0, 0.08)
                radius: 4
                samples: 8
                horizontalOffset: 0
                verticalOffset: 2
            }

            // 悬停缩放效果
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: statusCardRoot.scale = 1.02
                onExited: statusCardRoot.scale = 1.0
            }

            Behavior on scale {
                NumberAnimation { duration: 200; easing.type: Easing.InOutCubic }
            }

            Column {
                anchors.fill: parent
                padding: 20
                spacing: 16

                Row {
                    spacing: 16
                    width: parent.width

                    Column {
                        Label {
                            text: statusCardRoot.title
                            font.pixelSize: 12
                            color: "#64748b"
                        }
                        Label {
                            text: statusCardRoot.value
                            font.pixelSize: 20
                            font.bold: true
                            color: "#1e293b"
                        }
                    }

                    Item { width: 1 }

                    Rectangle {
                        width: 40
                        height: 40
                        radius: 8
                        color: statusCardRoot.iconBgColor

                        Text {
                            anchors.centerIn: parent
                            text: {
                                if (statusCardRoot.icon === "truck") return "🚛"
                                else if (statusCardRoot.icon === "clock-o") return "⏰"
                                else if (statusCardRoot.icon === "tachometer") return "📊"
                                else if (statusCardRoot.icon === "gear") return "⚙"
                                else if (statusCardRoot.icon === "gasoline") return "⛽"
                                else return "📦"
                            }
                            font.pixelSize: 20
                            color: statusCardRoot.iconColor
                        }
                    }
                }

                Column {
                    spacing: 4
                    width: parent.width

                    Rectangle {
                        visible: statusCardRoot.progressVisible
                        height: 4
                        radius: 2
                        color: "#f1f5f9"
                        width: parent.width

                        Rectangle {
                            width: parent.width * (statusCardRoot.progressValue / 100)
                            height: parent.height
                            radius: 2
                            color: statusCardRoot.progressColor
                        }
                    }

                    Row {
                        spacing: 4
                        visible: statusCardRoot.extraInfo !== "" || statusCardRoot.trendVisible

                        Text {
                            visible: statusCardRoot.trendVisible
                            text: statusCardRoot.trendUp ? "▲" : "▼"
                            font.pixelSize: 10
                            color: statusCardRoot.trendUp ? "#22c55e" : "#ef4444"
                        }

                        Label {
                            text: statusCardRoot.extraInfo || statusCardRoot.trendValue
                            font.pixelSize: statusCardRoot.extraInfo !== "" ? 10 : 12
                            color: statusCardRoot.extraInfo !== "" ? "#64748b" : (statusCardRoot.trendUp ? "#22c55e" : "#ef4444")
                        }
                    }
                }
            }
        }
    }

    // 统计项组件定义
    Component {
        id: statItemComponent

        Column {
            id: statItemRoot
            property string label: ""
            property string value: ""
            property string trend: ""
            property bool trendUp: true

            width: parent ? parent.width : 200
            spacing: 8
            height: childrenRect.height

            Row {
                spacing: 16
                width: parent.width

                Label {
                    text: statItemRoot.label
                    font.pixelSize: 14
                    color: "#64748b"
                }

                Item { width: 1 }

                Label {
                    text: statItemRoot.value
                    font.pixelSize: 14
                    font.bold: true
                    color: "#1e293b"
                }
            }

            Row {
                spacing: 4
                width: parent.width

                Text {
                    text: statItemRoot.trendUp ? "▲" : "▼"
                    font.pixelSize: 10
                    color: statItemRoot.trendUp ? "#22c55e" : "#ef4444"
                }

                Label {
                    text: statItemRoot.trend
                    font.pixelSize: 12
                    color: "#64748b"
                }
            }
        }
    }
}